<template>
	<div class="firstDiv">
	<div class="container" id="majorInfo">
		<div>
			<PageTop></PageTop>
			<div class="navigation_bar ">
				<ul class="nav nav-tabs nav-justified">
					<li class="nav-item"><a class="nav-link" href="/#/home">首页</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/mnzy">模拟填志愿</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/schoolQuery">查学校</a></li>
					<li class="nav-item"><a class="nav-link active" href="/#/major">查专业</a></li>
					<!-- <li class="nav-item"><a class="nav-link" href="/">智能选大学</a></li> -->
					<li class="nav-item"><a class="nav-link" href="/#/echarts">高考大数据</a></li>
					<li class="nav-item"><a class="nav-link" href="/#/chat">在线答疑</a></li>
				</ul>
			</div>
		</div>

		<div class="onepage">
			<div class="layui-card">
				<div class="layui-card-header" style="height: 100%;">
					<div class="special-title">
						<div class="special-name" style="font-size: 30px; font-weight: 500;color: #ffffff;">
							{{majorInfo.majorName}}
						</div>
						<div class="Special-url" style="color: #FFFFFF;font-weight: 500;font-size: 15px;">
							{{majorInfo.majorLevel}} &nbsp;&nbsp;|&nbsp;&nbsp;
							专业代码：{{majorInfo.majorId}}&nbsp;&nbsp;|&nbsp;&nbsp;
							修业年限：{{majorInfo.lengthOfStudy}}&nbsp;&nbsp;|&nbsp;&nbsp;
							学位：{{majorInfo.diploma}}
						</div>
					</div>
				</div>
				<div class="layui-card-body">
					<span style="color: white;
					font-size: 20px;
					font-weight: 500;
					font-family: 楷体;">专业介绍</span>
					<p style="margin-top: 10px; font-family: 楷体;">
						{{briefIntros[1]}}
					</p>

				</div>
			</div>
		</div>

		<div class="twopage">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="专业概况">
					<div class="row">
						<div class="special-intro col-lg-8 col-md-12 col-sm-12">
							<div class="special-introduction">
								<span id="major-title">| 专业相关</span>
								<el-card class="special-introduction-box">
									<p style="font-family: 楷体;" v-for="para in majorInfo.briefIntros">
										{{para}}
									</p>

								</el-card>
							</div>

							<div class="row">
								<div class="male-female-ratio col-6">
									<span id="major-title">| 男女比例</span>
									<span style="margin-left: 30px;">
										{{majorInfo.boyRadio*100}} : {{majorInfo.girlRadio*100}}
									</span>
									<el-card class="male-female-box d-none d-lg-block">
										<div class="row">
											<div class="col-lg-2">
												<img src="../../assets/male.png" style="width: 30px; float: right;" />
											</div>
											<div class="col-lg-7">
												<el-progress :text-inside="true" :stroke-width="24"
													:percentage="majorInfo.boyRadio*100" status="success"
													style="width: 180px; margin-top: 10px;"></el-progress>
											</div>
											<div class="col-lg-2">
												<img src="../../assets/female.png" style="width: 30px;" />
											</div>
										</div>
									</el-card>
								</div>
								<div class="unity-coherence-ratio col-6" style="float: right;">
									<span id="major-title">| 文理比例</span>
									<span style="margin-left: 30px;">
										{{majorInfo.sradio*100}} : {{majorInfo.aradio*100}}
									</span>
									<el-card class="unity-coherence-box d-none d-lg-block">
										<div class="row">
											<div class="col-lg-2"
												style="font-size: 20px; font-weight: 500; float: right;">
												理
											</div>
											<div class="col-lg-8">
												<el-progress :text-inside="true" :stroke-width="24"
													:percentage="majorInfo.sradio*100" status="exception"
													style="width: 180px; margin-top: 10px;"></el-progress>
											</div>
											<div class="col-lg-2" style="font-size: 20px; font-weight: 500;">文</div>
										</div>
									</el-card>
								</div>
							</div>



							<div class="employment-rate">
								<span id="major-title">| 就业率（近三年）</span>
								<div class="col-lg-10">
									<el-card class="employment-box">
										<el-steps :active="3" align-center>
											<el-step title="2019" :description="majorInfo.erate1"></el-step>
											<el-step title="2020" :description="majorInfo.erate2"></el-step>
											<el-step title="2021" :description="majorInfo.erate3"></el-step>
										</el-steps>
									</el-card>
								</div>
							</div>

							<div class="elective-suggestion">
								<span id="major-title">| 选考学科建议 ：</span>
								<span>{{majorInfo.advice}}</span>
							</div>

							<div class="similar-special">
								<span id="major-title">| 考研方向</span><br />
								<div class="special-link" style="margin-top: 10px;">
									<span>{{majorInfo.masterDir}}</span>
								</div>
							</div>

						</div>
						<div class="major-rank col-lg-4 d-none d-lg-block">
							<MajorRcomment></MajorRcomment>
						</div>
					</div>


				</el-tab-pane>

				<el-tab-pane label="专业详解">
					<div class="special-detail" style="margin-top: 20px;">
						<span id="major-title">| 专业详解</span>
						<el-card class="special-detail-box" style="margin-top: 20px;">
							<p style=" font-family: 楷体;" v-for="para in majorInfo.detailIntros">
								{{para}}
							</p>
						</el-card>
					</div>
				</el-tab-pane>

				<el-tab-pane label="开设院校">
					<span id="major-title" style="margin-top: 40px;">| 查询开设院校</span>
					<div style="margin-left: -30px;">
						<MajorSchool ref="child1" :majorId="majorInfo.dataId"></MajorSchool>
					</div>

				</el-tab-pane>
				<el-tab-pane label="相关就业">
					<span id="major-title" style="margin-top: 40px;">| 专业就业</span>
					<div class="col-lg-8" style="margin-top: 20px;">
						<el-card>
							{{prospect}}
						</el-card>

						<div class="echarts" style="margin-top: 30px;">
							<span id="major-title">| 就业岗位分布</span>
							<div>
								<JobEcharts :majorId="dataId"></JobEcharts>
							</div>
							<!-- <span id="major-title" style="margin-top: 40px;">| 就业行业分布</span>
												<div>
													<PostEcharts ></PostEcharts>
												</div>
												<span id="major-title" style="margin-top: 40px;">| 就业岗位分布</span>
												<div>
													<AreaEcharts></AreaEcharts>
												</div> -->
						</div>
					</div>




				</el-tab-pane>
			</el-tabs>

		</div>

		<div id="page_bottom" style="margin-top: 50px;">
			<PageBottom></PageBottom>
		</div>

	</div>
	</div>
</template>

<script>
	import PageTop from '../../components/basic/PageTop.vue'
	import PageBottom from '../../components/basic/PageBottom.vue'
	import MajorSchool from '../school.vue'
	import MajorRcomment from './majorRecommend.vue'
	import PostEcharts from './postEcharts.vue'
	import AreaEcharts from './areaEcharts.vue'
	import JobEcharts from './jobEcharts.vue'

	export default {
		name: 'majorInfo',
		data() {
			return {
				activeName: '专业详解',
				dataId: 2148, //用向数据库查询专业传递的id
				majorInfo: [],
				briefIntros: [],
				prospect: ''
			}
		},
		methods: {

			init() {
				var param = this.$qs.stringify({
					dataId: this.dataId,
				});
				// console.log(param);
				// 获取专业信息
				this.$axios.post("/major/showMajorById", param)
					.then(rst => {
						// console.log(rst.data);
						this.majorInfo = rst.data;
						this.briefIntros = this.majorInfo.briefIntros
						// console.log([this.majorInfo.briefIntros]);
						// console.log(this.briefIntros);
					}).catch(ex => {
						console.log(ex);
					});
			},
			handleClick(tab) {
				console.log(tab.props.label);
				if (tab.props.label == "开设院校") {
					// console.log(this.$refs.child1) //返回的是一个vue对象，所以可以直接调用其方法
					// 调用子组件里的方法
					this.$refs.child1.childMethod();
				}
				if (tab.props.label == "相关就业") {
					var param = this.$qs.stringify({
						majorId: this.dataId,
					});
					// console.log(param);
					// 获取专业信息
					this.$axios.post("/echarts/showProspectById", param)
						.then(rst => {
							// console.log(rst.data[0]);
							this.prospect = rst.data[0].prospect;

						}).catch(ex => {
							console.log(ex);
						});
				}
			}

		},
		created() {
			const routerParams = this.$route.query.dataId;
			this.dataId = routerParams;
			this.init();
		},
		mounted() {
			layui.use('element', function() {
				var element = layui.element;

			});
		},
		components: {
			PageBottom,
			PageTop,
			MajorSchool,
			MajorRcomment,
			PostEcharts,
			AreaEcharts,
			JobEcharts
		}
	}
</script>

<style>
	.firstDiv{
		background-image: url(../../assets/backimg5.png);
	}
	#majorInfo .el-card {
		border-radius: 15px;
	}

	.navigation_bar {
		margin-top: 20px;
	}


	.navigation_bar ul.nav>li>a {
		color: #000000;
		font-size: 17px;
		font-weight: bold;
	}

	#majorInfo .onepage {
		margin-top: 40px;
	}

	#majorInfo .el-link {
		font-size: 17px;
	}

	#majorInfo .onepage .layui-card {
		background: -webkit-linear-gradient(bottom, white, #90EE90, #67C23A) no-repeat;
		border-radius: 15px;
	}

	#majorInfo .onepage p {
		text-indent: 2em;
	}

	#majorInfo .el-tabs__item {
		font-size: 23px !important;
		width: 200px !important;
		height: 40px !important;
		text-align: center;
	}

	#majorInfo .el-tabs__item {
		font-size: 18px !important;
		width: 200px !important;
		height: 40px !important;
		text-align: center;
	}

	#majorInfo .special-introduction p {
		text-indent: 2em;
	}

	#majorInfo #major-title {
		font-size: 20px;
		font-weight: 500;
	}

	#majorInfo .special-introduction {
		margin-top: 20px;
	}

	#majorInfo .special-introduction-box {
		margin-top: 20px;
	}

	#majorInfo .special-introduction .el-link {
		color: #009688;
	}

	#majorInfo .male-female-ratio {
		margin-top: 30px;
	}

	#majorInfo .male-female-box {
		margin-top: 20px;
		width: auto;
	}

	#majorInfo .unity-coherence-ratio {
		margin-top: 30px;
	}

	#majorInfo .unity-coherence-box {
		margin-top: 20px;
		width: auto;
	}

	#majorInfo .employment-rate {
		margin-top: 40px;
	}

	#majorInfo .employment-box {
		margin-top: 20px;
		width: auto;
	}

	#majorInfo .elective-suggestion {
		margin-top: 40px;
	}

	#majorInfo .similar-special {
		margin-top: 40px;
	}

	#majorInfo .special-link .el-link {
		margin-top: 20px;
		margin-left: 15px;
	}

	#majorInfo .graduate-direction {
		margin-top: 40px;
	}
</style>
